<template>
	<div :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled1'" class="cps-view cps-view-tabel">
		<tabFiveTabelShow v-if="isShow" type="draw" :title="titleT" :ClsType="selectItem.clsType"
			@close="isShow = false" @getResponse="getResponse">
		</tabFiveTabelShow>
		<div :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled2'" style="width: 1029px;">
			<div class="title-view">
				{{ $t("message.BSCps.drawingCps.label_1") }}
			</div>
			<ux-grid ref="singleTable" :data="prposTabelData" style="width: 100%" :header-cell-style="{
				color: 'rgba(0, 0, 0, 0.85)',
				fontSize: '14px',
				textAlign: 'left',
				fontWeight: 'bold',
				padding: 0,
				height: '32px',
			}" :cell-style="{
				color: 'rgba(96,98,102,1)',
				fontSize: '14px',
				textAlign: 'left',
				padding: 0,
				height: '32px',
				width: '100%'
			}" :row-style="{
				color: 'rgba(96,98,102,1)',
				fontSize: '13px',
				textAlign: 'left',
				padding: 0,
				height: '32px',
				width: '100%'
			}" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight" v-loading="loading"
				element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
				:element-loading-text="$t('message.bhView.loading')">
				<template slot="empty"> No data </template>
				<ux-table-column property="clsName" :title="$t('message.BSCps.drawingCps.label_2')" :width="227">

					<template slot-scope="scope">
						<p>{{ scope.row.clsName }}</p>
					</template>
				</ux-table-column>
				<ux-table-column property="drwPass" :title="$t('message.BSCps.drawingCps.label_3')" :width="570">

					<template slot-scope="scope">
						<p style="color:#106EBEFF;cursor: pointer;" @click="pushCAD(scope.row)">{{ scope.row.drwPass }}
						</p>
					</template>
				</ux-table-column>
				<!-- <ux-table-column property="drwPass" title="共有" :width="300">
					<template slot-scope="scope">
						<p style="color:#106EBEFF">{{ scope.row.clsType }}</p>
					</template>
				</ux-table-column> -->
				<ux-table-column property="wrk_cls_name" :title="$t('message.BSCps.drawingCps.label_4')" :width="227">

					<template slot-scope="scope">
						<div class="table-msg-view">
							<div
								:class="$hasEditPermission('/BHView') && scope.row.shareType == 1 ? '' : 'table-msg-view-gray1'">
								<span
									:class="$hasEditPermission('/BHView') && scope.row.shareType == 1 ? '' : 'table-msg-view-gray'"
									@click="showFn(scope.row)">{{ $t("message.public.edit") }}</span>
							</div>
							<span class="solid"></span>
							<div
								:class="$hasEditPermission('/BHView') && scope.row.shareType == 1 ? '' : 'table-msg-view-gray1'">
								<span
									:class="$hasEditPermission('/BHView') && scope.row.shareType == 1 ? '' : 'table-msg-view-gray'"
									@click="scope.row.drwPass = ''">{{ $t("message.public.delete") }}</span>
							</div>
						</div>
						<!-- @click="DelFn(scope.row) -->
					</template>
				</ux-table-column>
			</ux-grid>
		</div>
	</div>
</template>

<script>
import { getDrawList, getDrawRemark, DelDrawTipsMsg, DelDraw, UpdDraw } from "@/api/api";
import EventBus from "@/eventBus/bus";
import $ from "jquery";
import { getLocalStorage } from "../../../utils/storage";
import tabFiveTabelShow from './tabFiveTabelShow.vue';
import _ from 'lodash-es';
export default {
	name: "DetailCps",
	data() {
		return {
			userData: getLocalStorage('userData'),
			prposTabelData: [],
			prposTabelDataClone: [],
			tableHeight: 350,
			loading: false,

			bottomTips: "",
			isShow: false,
			selectItem: {},
			titleT: ''
		};
	},
	components: { tabFiveTabelShow },
	watch: {
		macNamebValue: {
			deep: true,
			handler: function (newV, oldV) {
				this.initFn();
			},
		},
		prposTabelData: {
            deep: true,
            handler: function (newV, oldV) {
                this.$emit('DataChangeFn', !_.isEqual(this.prposTabelData, this.prposTabelDataClone))
            },
        },
	},
	computed: {
		macNamebValue() {
			return this.$store.state.macNameb;
		},
	},
	methods: {
		// 保存
		async saveFn() {
			let dataJson = {
				Account: getLocalStorage("userName"),
				DmgCode: this.$store.state.macCode,
				PltCode: this.$store.state.pltCode,
				DataList: this.prposTabelData,
			};
			let res = await UpdDraw(dataJson);

		},
		// 削除
		async DelFn(row) {
			console.log(row);
			let R = await DelDrawTipsMsg({});
			if (R.data.code == 451) {
				this.$confirm(R.data.msg, '', {
					confirmButtonText: 'OK',
					cancelButtonText: 'Cancel',
					type: 'warning'
				}).then(async () => {
					let R = await DelDraw({
						dmgCode: this.$store.state.macCode,
						ClsType: row.clsType
					});
					if (R.data.code != 0) {
						this.$alert(R.data.msg, '', {
							confirmButtonText: 'OK',
							type: 'warning',
						});
						return
					}
					this.$message.success('OK');

					this.initFn();
				}).catch(() => {

				});
			} else {
				this.$alert(R.data.msg, '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
			}
		},
		// 跳转
		pushCAD(row) {
			console.log('row', row);
			let EXT = row.ext

			var { href } = this.$router.resolve({
				name: "CAD",
				query: {
					id: row.fileID,
					radioType: -1
				},
			});

			let newWindow = window.open(href, "_blank");
		},
		// 显示弹框
		showFn(row) {
			console.log(row);
			if (row.clsType == 1) {
				this.titleT = '部品フォルダ'
			}
			if (row.clsType == 2) {
				this.titleT = '検査フォルダ'
			}
			if (row.clsType == 3) {
				this.titleT = '肉厚フォルダ'
			}
			this.selectItem = row;
			this.isShow = true;
		},
		// 弹框中内容，同步
		async getResponse(arr) {
			console.log(arr);
			this.selectItem.fileID = arr[0].id;
			this.selectItem.drwPass = `${arr[0].name}.${arr[0].ext}`;
			this.selectItem.ext = arr[0].ext;
			this.selectItem.path = arr[0].path;
		},
		handleCurrentChange(val) {
			console.log(val);
		},

		initFn() {
			this.getDrawListApi();
			this.getDrawRemarkApi();
		},
		async getDrawListApi() {
			let res = await getDrawList({
				pltCode: this.$store.state.pltCode,
				dmgCode: this.$store.state.macCode,
			})
			this.prposTabelData = [];
			if (res.data.code != 0) {
				return;
			}
			this.prposTabelData = _.cloneDeep(res.data.data);
			this.prposTabelDataClone = _.cloneDeep(res.data.data);
			this.$emit('DataChangeFn', false)
		},

		async getDrawRemarkApi() {
			let res = await getDrawRemark()
			this.bottomTips = '';
			if (res.data.code != 0) {
				return;
			}

			if (res.data.data && res.data.data.length > 0)
				this.bottomTips = res.data.data[0].label + res.data.data[0].shareType;

		},
	},
	created() {
		
		this.initFn();
	},
	mounted() {
		let heightStyle = $(".cps-view").height();
		this.tableHeight = heightStyle - 77;
		
	},
	beforeDestroy() {
		
	},
	destroyed() { },
};
</script>

<style lang="scss" scoped>
.cps-view {
	height: 100%;
	border: 1px solid #d3d3d3;
	max-height: calc(100% - 41px);
	// overflow: hidden;
	overflow-y: auto;
	width: 100%;

	.content-view {
		width: 100%;
	}

	.title-view {
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		color: rgba(0, 0, 0, 0.85);
		font-weight: bold;
		// border: 1px solid #c3c3c3;
		border-bottom: 0 none;
	}

	.footer-message {
		width: 100%;
		height: 30px;
		// border: 1px solid #c3c3c3;
		border-top: 0 none;
		display: flex;
		align-items: center;
		padding: 0 10px;
		background: #edeeef;
		color: #000;
		margin-top: 10px;
	}

	.footer {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 16px 0 0 0;

		button {
			width: 82px;
			height: 32px;
			background: #ffffff;
			// border: 1px solid #d9d9d9;
			text-align: center;
			line-height: 32px;
			margin-right: 16px;
		}

		.okBTn {
			background: #106ebe;
			color: #fff;
		}
	}


	.table-msg-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: rgba(234, 43, 58, 1);
		font-size: 14px;

		span {
			cursor: pointer;
		}

		.solid {
			width: 1px;
			height: 14px;
			margin: 0 8px;
			cursor: none;
			background: rgba(233, 233, 233, 1);
		}
	}

	.table-msg-view-gray1 {
		cursor: not-allowed !important;

	}

	.table-msg-view-gray {
		color: rgba(128, 128, 128, 0.479) !important;

		pointer-events: none;
	}
}



::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
	border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
	box-shadow: none;
}

::v-deep .elx-table .elx-table--border-line {
	border-color: #c3c3c3;
}

::v-deep .el-button--text {
	background: transparent;
}

// ::v-deep .elx-table.border--full .elx-body--column,
// .elx-table.border--full .elx-footer--column,
// .elx-table.border--full .elx-header--column {
//   background-image: linear-gradient(#c3c3c3, #c3c3c3),
//     linear-gradient(#c3c3c3, #c3c3c3);
// }</style>
